<template>
    <div class="container_box">
        <el-scrollbar class="main_box">
            <div class="layout">
                <div class="contant">
                    <el-form
                        ref="ruleFormRef"
                        :model="addGroupingForm"
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                        :size="formSize">
                        <el-form-item label="门店名称" prop="store_name">
                            <el-input
                                v-model="addGroupingForm.store_name"
                                placeholder="请输入门店名称"
                                maxlength="15"></el-input>
                        </el-form-item>
                        <el-form-item label="门店分组" prop="group_id">
                            <el-cascader
                                ref="cascaderRef"
                                v-model="addGroupingForm.group_id"
                                style="width: 100%"
                                :props="defaultProps1"
                                :options="groupOptions"
                                @change="orgChange" />
                        </el-form-item>
                        <el-form-item label="门店地址" prop="store_address">
                            <!-- <el-input v-model="addGroupingForm.store_address" placeholder="请输入门店地址" maxlength="25"></el-input> -->

                            <!-- 地图api -->
                            <MapTen
                                ref="maptenRef"
                                :store_address="store_address"
                                :address="address"
                                @searchresult="searchresult"
                                @getLocat="getLocat"></MapTen>
                        </el-form-item>
                        <el-form-item label="门店状态">
                            <el-switch v-model="addGroupingForm.store_statustype" @change="statechange" />
                        </el-form-item>
                        <el-form-item label="门店定位" prop="lon">
                            <div class="absolot">
                                <div class="felxcontan">
                                    <p>经度</p>
                                    <el-input
                                        v-model="addGroupingForm.lon"
                                        :disabled="true"
                                        placeholder="请输入经度"
                                        maxlength="15">
                                    </el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="lat">
                            <div class="absolot">
                                <div class="felxcontan">
                                    <p>纬度</p>
                                    <el-input
                                        v-model="addGroupingForm.lat"
                                        :disabled="true"
                                        placeholder="请输入纬度"
                                        maxlength="15">
                                    </el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="门店编码 " prop="store_code">
                            <el-input v-model="addGroupingForm.store_code" placeholder="请输入门店编码"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button @click="cancelHandel">取消</el-button>
            <el-button type="primary" @click="submitHandel">保存</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Search from './components/Search.vue';
import { getBoardlist } from '@/api/customerbulletin/bulleinManage';
import { getstaffsave, getstaffdetail } from '@/api/employe/storemanagement/sensitiveWord';
import { getGroupList } from '@/api/concreation';

import { ref, inject, onMounted, reactive, watch, nextTick, onBeforeMount } from 'vue';
import MapTen from './components/MapTen.vue';
import router from '@/router';
import { useRouter, useRoute } from 'vue-router';
import { getDay } from '@/utils/timeCycle';
import { ElForm, ElMessage, ElSteps } from 'element-plus';
import { groupInfo } from '@/api/smartMarketing/drainage/channelCode/index';
import { useStore } from '@/store';
const address = ref();
type FormInstance = InstanceType<typeof ElForm>;
const ruleFormRef: any = ref<FormInstance>();
const cascaderRef: any = ref(null); // 选择分组ref
const maptenRef = ref(null);
const groupOptions = ref([]);
const route = useRoute();
const store = useStore();
store.dispatch('content/group', {
    groupId: Number(route.query?.group_id) || 0
});

let pageType = route.query.type;
const rules: any = ref({
    store_name: { required: true, trigger: 'blur', message: '请输入门店名称' },
    group_id: { required: true, trigger: 'blur', message: '请选择门店分组' },
    store_address: { required: true, trigger: 'blur', message: '请输入门店地址' },
    store_statustype: { required: true, trigger: 'blur', message: '请选择门店状态' },
    lon: { required: true, trigger: 'blur', message: '请输入经度' },
    lat: { required: true, trigger: 'blur', message: '请输入纬度' },
    store_code: { required: true, trigger: 'blur', message: '请输入门店编码' }
});

const addGroupingForm = ref({
    id: route.query.id,
    store_name: '', //门店名
    group_id: Number(route.query?.group_id) || 0, //分组id
    store_address: '', //门店地址
    store_statustype: false, //门店状态1 正常true 2关闭false
    store_status: '2', // 门店状态 1 正常 2关闭
    lon: '', //经度
    lat: '', //纬度
    store_code: '' //门店编码
});
const defaultProps1 = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
};
const searchresult = (data: any, address: any) => {
    addGroupingForm.value.lon = data.location.lng;
    addGroupingForm.value.lat = data.location.lat;
    addGroupingForm.value.store_address = address;
};
const statechange = (data: any) => {
    if (data == true) {
        addGroupingForm.value.store_status = '1';
    } else {
        addGroupingForm.value.store_status = '2';
    }
};
//取消按钮
const cancelHandel = () => {
    router.push(`/employee/storemanagement/storelist`);
};
const submitHandel = () => {
    ruleFormRef.value.validate((valid: boolean) => {
        if (valid) {
            const params = {
                ...addGroupingForm.value
            };
            getstaffsave(params).then((data: any) => {
                store.dispatch('content/group', {
                    groupId: addGroupingForm.value.group_id || 0
                });
                router.push({
                    path: '/employee/storemanagement/storelist',
                    query: { group_id: addGroupingForm.value.group_id || 0 }
                });
            });
        }
    });

    // router.push(`/employee/storemanagement/storelist`)
};
const getLocat = (data: any) => {
    addGroupingForm.value.lon = data?.latitude; //纬度
    addGroupingForm.value.lat = data?.lngitude; //经度
};
const store_address = ref({});
onMounted(() => {
    pageType = route.query.type;

    if (pageType == 'edit') {
        //编辑
        getstaffdetail({ store_id: route.query.id }).then((data: any) => {
            store_address.value = data.store_address;
            addGroupingForm.value.store_name = data.name;
            addGroupingForm.value.group_id = data.group_id;
            // addGroupingForm.store_address = data.store_address
            addGroupingForm.value.store_address = data.store_address;
            address.value = data.store_address;
            if (data.store_status == 1) {
                // 门店状态 1 正常 2关闭
                addGroupingForm.value.store_statustype = true;
            } else {
                addGroupingForm.value.store_statustype = false;
            }
            addGroupingForm.value.store_status = data.store_status;
            addGroupingForm.value.lon = data.lon;
            addGroupingForm.value.lat = data.lat;
            addGroupingForm.value.store_code = data.store_code;
        });
    }
    //门店分组
    getGroupList({ type: 22 }).then((res: any) => {
        groupOptions.value = res.data;
    });
});
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
</script>

<style lang="scss" scoped>
.layout {
    box-sizing: border-box;
    width: 100%;
    background: #fff;

    .contant {
        width: 50%;
        padding: 30px 10px;
    }

    .search {
        margin: 16px 0;
    }

    .pie {
        margin-bottom: 16px;
    }

    .list {
        margin-top: 15px;
    }

    .updated {
        width: 266px;
        line-height: 20px;
        color: #ff6b00;
        font-size: 14px;
        margin-top: 13px;
        border-radius: 10px;
        border: 1px solid #ff6b00;
    }

    .absolot {
        display: flex;
        justify-content: space-between;

        .felxcontan {
            display: flex;
            justify-content: flex-start;
        }

        p {
            width: 40px;
            color: #606266;
        }

        .el-input {
            width: 240px;
        }
    }
}
</style>
